<template>
    <div>
        <div class="bg-color-box">
            <!--顶部导航栏-->
            <van-nav-bar class="nav-bar-box" :left-arrow="true" @click-left="onClickLeft">
                <div slot="left">
                    <i class="go-back-icon"></i>
                    <span class="title">业主</span>
                </div>
            </van-nav-bar>

            <!--个人信息-->
            <div class="personal-info">
                <div class="myHeadImg" @click="clickHead()" ref="headImg">
                    <img src="../assets/images/head-portrait.png" alt="头像"/>
                </div>

                <div class="info">
                    <div>
                        <span class="name">{{$Cookies.get('personName')}}</span>
                        <span class="certified">已认证</span>
                    </div>

                    <div class="phone">
                        <span>{{$Cookies.get('personPhone')}}</span>
                    </div>
                </div>
            </div>
        </div>

        <!--我的二维码-->
        <div class="module-box my-QRCode">
            <div class="title">
                <span class="span">我的二维码</span>

                <van-button class="btn-history" size="small" @click="clickHistory()">出入历史</van-button>
            </div>

            <!--出入二维码切换-->
            <van-tabs class="sub-tabs" @click="clickTabs" v-model="active" type="card" color="#61dda3" :animated="true">
                <van-tab title="出">
                    <!--出小区二维码-->
                    <div class="qrcode" ref="outQRcode"></div>
                </van-tab>

                <van-tab title="入">
                    <!--入小区二维码-->
                    <div class="qrcode" ref="inQRcode"></div>
                </van-tab>
            </van-tabs>
        </div>

    </div>
</template>

<script>
    import {NavBar, Button, Tabs, Tab} from 'vant';

    export default {
        name: 'owner',

        components: {
            [NavBar.name]: NavBar,
			[Button.name]: Button,
			[Tabs.name]: Tabs,
			[Tab.name]: Tab,
        },

        props: {},

        data() {
            return {
				active: 0,
            }
        },

        mounted() {
            //生成出小区二维码
			this.$nextTick(() => {
				this.showOutQRCode();
			});

			this.getHeadImg();
        },

        methods: {
			//点击返回
			onClickLeft(){
				this.$router.go(-1);
			},

			//获取头像
			getHeadImg(){
				if(this.$Cookies.get('headImgUrl')){
					this.$refs.headImg.innerHTML=`<img src="${this.$Cookies.get('headImgUrl')}" alt="头像"/>`
				}
			},

        	//点击出入切换
			clickTabs(index){
                //已经有了就不再重复生成
                if(index === 1){
					this.$nextTick(() => {
						this.showInQRCode();
					})
                }
            },
            //生成出小区二维码
			showOutQRCode(){
				this.$refs.outQRcode.innerHTML= '';   //移除老的二维码

				let text = JSON.stringify({
					QRCodeType: 'owner',
					personPhone: this.$Cookies.get('personPhone'),
					type: 'out'
				});

				text = encodeURI(text);    //对二维码内容进行转码

				new this.$QRCode(this.$refs.outQRcode, {
					text: text,
					width: 200,
					height: 200,
					colorDark: '#000000',
					colorLight: '#ffffff',
					correctLevel: this.$QRCode.CorrectLevel.M,   //容错率，L/M/H
				})
			},
			//生成入小区二维码
			showInQRCode(){
				this.$refs.inQRcode.innerHTML= '';   //移除老的二维码

				let text = JSON.stringify({
					QRCodeType: 'owner',
					personPhone: this.$Cookies.get('personPhone'),
					type: 'in'
				});

				text = encodeURI(text);    //对二维码内容进行转码

				new this.$QRCode(this.$refs.inQRcode, {
					text: text,
					width: 200,
					height: 200,
					colorDark: '#000000',
					colorLight: '#ffffff',
					correctLevel: this.$QRCode.CorrectLevel.M,    //容错率，L/M/H
				})
			},

            //点击头像
			clickHead(){
				this.$router.push('/personalInfo');
            },

            //点击出入历史
			clickHistory(){
				this.$router.push('/ownerHistory');
            }
        },
    }
</script>

<style lang="scss" scoped>
    /*二维码样式*/
    .qrcode{
        width: 200px;
        margin: 0 auto;
        margin-top: 20px;
        display: inline-block;
    }

    /*个人信息*/
    .personal-info{
        padding: 30px;

        .info{
            display: inline-block;
            vertical-align: top;
            margin-left: 10px;
            margin-top: 2px;

            .name{
                font-size: 20px;
                font-weight: bold;
                color: white;
                vertical-align: middle;
            }
            .certified{
                border: solid 1px #f5fb1a;
                color: #f5fb1a;
                font-size: 12px;
                padding: 2px 6px;
                border-radius: 4px;
                vertical-align: middle;
                margin-left: 4px;
            }
            .phone{
                font-size: 15px;
                color: white;
                margin-top: 6px;
            }
        }
    }

    /*我的二维码*/
    .my-QRCode{
        padding: 20px;
        text-align: center;

        .title{
            text-align: left;
            line-height: 30px;
            margin-bottom: 20px;

            .span{
                font-size: 20px;
                font-weight: bold;
                color: #222222;
            }

            /*出入历史按钮*/
            .btn-history{
                float: right;
            }
            .van-button--default {
                background: linear-gradient(to bottom right, #61dda3, #07b6d5);
                border-radius: 15px;
            }
            .van-button__text{
                font-size: 15px;
                color: white;
                padding: 0 10px;
            }
        }
    }
</style>

<style>
    /*tabs组件样式覆盖*/
    .sub-tabs .van-tabs__wrap{
        height: 40px;
    }
    .sub-tabs .van-tabs__nav--card{
        height: 40px;
        margin: 0;
    }
    .sub-tabs .van-ellipsis{
        font-size: 20px;
        line-height: 40px;
    }
</style>

